import React, { useEffect, useState } from 'react'
import Taro, { useDidShow } from '@tarojs/taro'
import {View,Image,Text} from '@tarojs/components'
import './index.scss'

export default function CinemaDetail() {
  const [cinema,setCinema] = useState({})
  useDidShow(()=>{
    Taro.$get('/cinema-app/api/v1/cinema/detail',{
      cinemaId:Taro.getStorageSync('selectMerchant').id,
      latitude:Taro.getStorageSync('position')?.latitude || undefined,
      longitude:Taro.getStorageSync('selectMerchant')?.longitude || undefined,
    }).then(res=>{
      setCinema(res.content || Taro.getStorageSync('selectMerchant')||{})
    })
  })
  return (
    <View className='cinema-detail'>
      <View className="detail-header">{cinema.cinemaNickName}</View>
      <View className="detail-card">
        <View className="card-item" onClick={e=>{
          Taro.openLocation({
            latitude: parseFloat(cinema.latitude),
            longitude: parseFloat(cinema.longitude),
            scale: 18,
            name: cinema.cinemaNickName,
            address: cinema.address,
          })
        }}>
          <Image className='icon' mode='widthFix' src={require('@/images/ticket/wz.png')}></Image>
          <View className='p'>{cinema.address}</View>
          <View className="at-icon at-icon-chevron-right"></View>
        </View>
        <View className="card-item" onClick={e=>{
          Taro.makePhoneCall({
            phoneNumber:cinema.contactPhone
          })
        }}>
          <Image className='icon' mode='widthFix' src={require('@/images/ticket/dh.png')}></Image>
          <View className='p'>{cinema.contactPhone}</View>
          <View className="at-icon at-icon-chevron-right"></View>
        </View>
      </View>
      <View className="detail-card">
        <View className="card-title">特色信息</View>
        {cinema.specialties?.length?cinema.specialties.map(res=>{
          return <View className="card-item" key={res.title}>
            <View className="span">{res.title}</View>
            <View className="p">{res.titleContent}</View>
          </View>
        }):null}
      </View>
    </View>
  )
}
